<template>
    <div>
        <el-upload
        list-type="picture-card"
        action="#"
        :on-remove="onRemove"
        :on-preview="onPreview"
        :on-change="onChange"
        :before-upload="beforUpload"
        :file-list="fileList"
    :http-request="httpRequest"
    :class="{hidden:fileList.length === uploadMaxNum}"
        >
        <i class="el-icon-plus"></i>
        </el-upload>
        <el-progress v-if="showPercent" :percentage="percentage"
        style="50px"
        ></el-progress>
         <el-dialog width="600px" title="图片预览" :visible.sync="show">
            <img width="100%" :src="imgUrl" alt="">
        </el-dialog>
    </div>
</template>

<script>
import COS from 'cos-js-sdk-v5';
const cos = new COS({
    SecretId: 'AKIDvgBPM3TcT3NUO1NSGn43lCMFrIVS8YhZ',
    SecretKey:'cx1oKZXEdmdDXaeSyEDuKUNyIMSHo43l'
})
export default {
    name: 'ImageUpload',
    props: {
     uploadMaxNum: {
        type: Number,
        default:1
    },
   },
    data() {
        return {
            show: false,
            fileList: [],
            imgUrl:'',
            currentFileUid: '',
            showPercent: false,
            percentage:0
        };
    },

    mounted() {
        
    },

    methods: {
        onPreview(file) {
            this.imgUrl = file.url
            this.show = true
        },
        onRemove(file,fileList) {
            this.fileList = this.fileList.filter(item=>item.uid !== file.uid)
        },
        onChange(file, fileList) {
            this.fileList = fileList.map((item)=>item)
            // this.fileList = fileList
            // console.log(fileList);
        },
        beforUpload (file) {
            //上传前的校验
            const maxSize = 1024 * 1024 * 10
            if (file.size > maxSize) {
                this.$message.warning('体积不能超过10m')
                return false
            }
            // const typeArr = ['image/jpg', 'image/gif', 'image/png', 'image/jepg']
            // if (!typeArr.includes(file.type)) {
            //     this.$message.warning('格式不支持')
            //     return false
            // }
            this.currentFileUid = file.uid
            this.showPercent = true
            this.percentage = 0
            return true
        },
        async httpRequest({ file }) {
        //     let fd = new FormData()
        // fd.append('file',file)
        // let {data} = await uploadImage(fd)
        // console.log(data);
            cos.putObject({
          Bucket: 'mayanjie-1313178971', // 存储桶
          Region: 'ap-nanjing', // 地域
          Key: file.name, // 文件名
          Body: file, // 要上传的文件对象
          StorageClass: 'STANDARD', // 上传的模式类型 直接默认 标准模式即可
          // 上传到腾讯云 =》 哪个存储桶 哪个地域的存储桶 文件  格式  名称 回调
                onProgress:  (progressData)=> {
                    // console.log(JSON.stringify(progressData));
            this.percentage = progressData.percent * 100
          }
        }, (err, data)=> {
          // data返回数据之后 应该如何处理
                if (err) {
                    console.log(err);
                    return this.$message.error('上传失败')
                }
                this.fileList = this.fileList.map(item => {
                    if (item.uid === this.currentFileUid) {
                        item.url = "http://" + data.Location
                        item.upload = true
                    }
                    return item
                })
                this.currentFileUid = ''
                //延迟关闭
                setTimeout(() => {
                    this.showPercent = false
                },500)
        })
        }
    },
};
</script>

<style lang="scss" scoped>
::v-deep .hidden{
    .el-upload{
        display: none;
    }
}
::v-deep .el-progress-bar{
    width: 180px !important;
}
</style>